<template>
  <div class="subPage">
    <scroll-view scroll-y="true" v-if="historyList.length > 0">
      <div class="init">
        <div v-for="(item, index) in historyList" :key='index' class="li" @click="goChat(item)">
          <div class="itemTop clearfix">
            <span v-if="item.category == '0'">
              <img :src="zhuanjiaImg" class="fl" />
              <span class="fl type">{{item.category_str}}</span>
            </span>
            <span v-if="item.category == '1'">
              <img :src="zhuankeImg" class="fl" />
              <span class="fl type">{{item.category_str}}</span>
            </span>
            <span v-if="item.category == '5'">
              <img :src="medicalImg"  class="fl" />
              <span class="fl type">{{item.category_str}}</span>
            </span>
            <span v-if="item.category == '2'">
              <img :src="tuanduiImg" class="fl" />
              <span class="fl type">{{item.category_str}}</span>
            </span>
            <span v-if="item.category == '3'">
              <img :src="tuwenImg" class="fl" />
              <span class="fl type">{{item.category_str}}</span>
            </span>
            <span v-if="item.category == '4'">
              <img :src="yinpingImg" class="fl" />
              <span class="fl type">{{item.category_str}}</span>
            </span>
            <span class="fr topRight">
              <span>预约时间:</span>
              <span>{{item.yuyueTime}}</span>
            </span>
          </div>
          <div class="itemBtm clearfix">
            <!-- <div class="itemLine1">
              <p>
                <span class="doctorName">{{item.doctor_name}}</span><span>{{item.positional_title}}<span><span class="xiegang">/</span></span>{{item.dept_name}}</span>
              </p> -->
            <!-- </div> -->
            <div class="btmFlex">
               <div class="itemBtmFl">
                <div class="doctorName itemLine1 nowrap" style="min-width:160rpx!important;">{{item.doctor_name}}</div>
               </div>
              <div class="itemBtmFr nowrap">
                <div class="itemLine1 nowrap">
                  <span>{{item.team_id?'':item.positional_title}}<span>
                  <span class="xiegang">{{item.team_id?'':'/'}}</span>
                  </span>{{item.dept_name}}</span>
                </div>
              </div>
            </div>
            <div class="btmFlex">
              <div class="itemBtmFl">
                <div class="itemLine1 lineTitle nowrap" style="width:160rpx!important;">病情描述：</div>
                <div class="itemLine1 lineTitle" style="width:160rpx!important;" >就 诊 人：</div>
              </div>
              <div class="itemBtmFr nowrap">
                <div class="itemLine1 nowrap">{{item.current_medical_history}}</div>
                <div class="itemLine1">
                  <span>{{item.patient_name}}</span>
                  <span class="xiegang">/</span>
                  <span>{{item.regular_age}}岁</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
    <div v-if="historyList.length===0 && !delayShowData" class="noDataImg">
      <img :src="noDataImg"/>
    </div>
  </div>
</template>
<script>
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import api from '@/api/api'
  let app = getApp()
  export default {
    data() {
      return {
        historyList: [],
        page: 1,
        size: 10,
        total: 0,
        imgUrl: '',
        zhuanjiaImg: '',
        zhuankeImg: '',
        medicalImg: require('../../../../../static/images/medical.png'),
        tuanduiImg: '',
        tuwenImg: '',
        yinpingImg: '',
        noDataImg: '',
        delayShowData: true
      }
    },
    mounted() {
      this.imgUrl = api.imgUrl
      this.zhuanjiaImg = this.imgUrl + 'zhuanjia.png'
      this.zhuankeImg = this.imgUrl + 'zhuanke.png'
      this.tuanduiImg = this.imgUrl + 'tuandui.png'
      this.tuwenImg = this.imgUrl + 'tuwen.png'
      this.yinpingImg = this.imgUrl + 'yinping.png'
      this.noDataImg = this.imgUrl + 'noData.png'
      this.historyList = []
      this.page = 1
      this.queryHistory()
    },
    // 上拉加载更多
    onReachBottom: function () {
      let up = Math.ceil(this.total)
      if (this.page === up) {
        return
      }
      this.page++
      this.queryHistory()
    },
    // 下拉刷新
    onPullDownRefresh: function() {
      this.page = 1
      this.historyList = []
      this.queryHistory()
    },
    methods: {
      // 查询个人信息
      queryHistory () {
        let that = this
        that.delayShowData = true
        that.$api.historyList({page: that.page, rows: 10, status: '03'},({'showLoading': true})).then((res) => {
          let list = []
          that.total = res.data.total / 10
          list = that.historyList.concat(res.data.rows)
          for (let i = 0; i < list.length; i++) {
            list[i].yuyueTime = list[i].appointment_time ? that.$utils.filterTime(list[i].appointment_time / 1000, 2) : ''
          }
          that.historyList = list
          that.delayShowData = false
          wx.stopPullDownRefresh()
        })
      },
      goChat (item) {
        let that = this
        if(item.status == '32') {
          that.$utils.showToast('text', '该患者已退费!')
          return
        }
        if(item.status == '34') {
          that.$utils.showToast('text', '该患者已违约!')
          return
        }
        let obj = {
          diagnose_start_time: item.diagnose_start_time/1000,
          diagnose_time: item.diagnose_time/1000,
          apt_id: item.apt_id,
          category: item.category,
          regular_id: item.regular_id,
          doctor_name: item.doctor_name,
          netease_id: item.doctor_netease_id,
          netease_token: item.netease_token,
          sessionId: 'p2p-' + item.netease_id,
          doctorImg: item. doctor_image,
          status: item.status,
          dept_name: item.dept_name
        }
        that.$store.commit(that.$types.TALK_INFO, obj)
        console.log(item.apt_id)
        // 音频
        if (item.category === '4' || item.category === "5") {
          if (item.chat_type=='1') {
            that.$router.push( `/pages/chat/child/leaveMsg/main?hadAudio=true&apt_id=${item.apt_id}&isHistory=true&category=${item.category}`);
          } else {
            that.$router.push(`/pages/chat/child/graphicChat/main?hadAudio=true`)
          }
        } else {
          // 图文
          if (item.chat_type=='1') {
             that.$router.push(`/pages/chat/child/leaveMsg/main?apt_id=${item.apt_id}&isHistory=true`);
          } else {
            that.$router.push(`/pages/chat/child/graphicChat/main`)
          }

        }
      }
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    background: #F9F9F9;
  }
  .init {
    background: #F9F9F9;
    overflow: auto;
    height: 100%;
    padding-top: 30rpx;
    .li {
      margin: 0 30rpx 30rpx 30rpx;
      background:rgba(255,255,255,1);
      box-shadow:0px 2rpx 6rpx 0rpx rgba(0,0,0,0.05);
      border-radius:16rpx;
      height: 310rpx;
      .itemTop {
        border-bottom: 1rpx solid #E9E9E9;
        height: 70rpx;
        line-height: 70rpx;
        .type {
          font-size: 28rpx;
          color: rgba(102, 102, 102, 1);
        }
        img {
          width: 44rpx;
          height: 44rpx;
          margin: 14rpx 7rpx 0 27rpx;
        }
        .topRight {
          font-size: 28rpx;
          margin-right: 25rpx;
          span:nth-child(1) {
            color: #999999;
          }
          span:nth-child(2) {
            color: #333333;
          }
        }
      }
      .itemBtm {
        padding: 25rpx 25rpx 34rpx 27rpx;
        font-size: 32rpx;
        .xiegang {
          display: inline-block;
          color: #CCCCCC;
          margin: 0 10rpx;
        }
        .doctorName {
          display: inline-block;
          font-size: 44rpx;
          font-weight: bold;
          color: rgba(74, 113, 232, 1);
        }
        .btmFlex {
          display: flex;
          .itemBtmFl {
            color: #333;
            .lineTitle {
              font-size: 32rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
          }

          .itemBtmFr {
            margin-left: 30rpx;
            flex: 1;
          }

          .itemLine1 {
            height: 62rpx;
            line-height: 62rpx;
            margin-bottom: 3rpx;

            .btn {
              height: 50rpx;
              line-height: 50rpx;
              display: inline-block;
              padding: 0 22rpx;
              border-radius: 25rpx;
              font-size: 28rpx;
              margin-top: 10rpx;
            }
          }

          .itemLine2 {
            height: 60rpx;
            line-height: 60rpx;
          }
        }
      }
    }
  }
</style>
